<template>
	<view class="contain">
		<view class="main">
			<scroll-view scroll-y="true" class="index" enable-flex=true>
				<view 
					:key="index"
					class="line"
					:class="[currentIndex === index?'active':'line']" 
					v-for="(model,index) in list"
					@click="selectNav(index)"
				>
					<text>{{model.title}}</text>
				</view>
			</scroll-view>
			<view class="pic">
				<view 
					class="pic_main" 
					v-if="currentIndex === 0" 
					:style="{width:screenwidth+'px'}"
				>
					<view class="title">
						<view class="t-icon t-icon-jinru-"></view>
						<view class="title_main">{{order_data.title}}</view>
					</view>
					<qiun-data-charts 
						type="column" 
						:chartData="order_data.order_data_main"
						:opts="order_data.opts"
						canvas2d = "true"
					/>
				</view>
				<view 
					class="pic_main" 
					v-else-if="currentIndex === 1" 
					:style="{width:screenwidth+'px'}"
				>
					<view class="title">
						<view class="t-icon t-icon-jinru-"></view>
						<view class="title_main">{{order_data.title}}</view>
					</view>
					<qiun-data-charts 
						type="column" 
						:chartData="order_data.order_data_main"
						:opts="order_data.opts"
						canvas2d = "true"
					/>
				</view>
				<view 
					class="pic_main" 
					v-else-if="currentIndex === 2" 
					:style="{width:screenwidth+'px'}"
					>
					{{list[currentIndex].title}}
				</view>
				<view class="pic_main" v-else-if="currentIndex === 3" :style="{width:screenwidth+'px'}">
					{{list[currentIndex].title}}
				</view>
				<view class="pic_main" v-else-if="currentIndex === 4" :style="{width:screenwidth+'px'}">
					{{list[currentIndex].title}}
				</view>
				<view class="pic_main" v-else-if="currentIndex === 5" :style="{width:screenwidth+'px'}">
					{{list[currentIndex].title}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { ref } from "vue"
	export default {
		data() {
			return {
				title:"这是一篇标题",
				screenwidth:0,
				list:[
					{id:1,title:"订单量",},
					{id:2,title:"销售额"},
					{id:3,title:"盈利情况"},
					{id:4,title:"客户画像"},
					{id:5,title:"客户需求"},
					{id:6,title:"员工业绩"}
				],
				currentIndex:0,
				order_data:{
					title:"2024年订单情况",
					order_data_main:{
			    		categories:['6月','7月','8月','9月','10月','11月'],
			    		series:[
							{
			        			name:'省内订单数',
			        			data:[35, 36, 31, 33, 13, 34]
			      			},
							{
			        			name:'省外订单数',
			       				data:[18, 27, 21, 24, 6, 28]
			      			}]
						},
					opts:{
						extra:{
							column:{
								width:20,
								activeBgColor:"#D4E4DC",
							}
						},
						xAxis:{
							titleOffsetX:5,
						}
					}
				}
			}
		},
		methods: {
			selectNav(index){
				this.currentIndex = index
			}
		},
		onLoad(data){
			this.screenwidth = uni.getWindowInfo().screenWidth-100
			  console.log(data)
		}
	}
</script>

<style>
	.contain{
		display: flex;
		position: fixed;
		width: 100%;
		height: 100%;
		background-color: #D4E4DC;
		flex-direction: column;
	}
	.main{
		display: flex;
		width: 100%;
		height: 500px;
		flex-direction: row;
		justify-content: space-between;
	}
	.index{
		display: flex;
		width: 100px;
		height: 100%;
		background-color: #649C7C;
		justify-content: space-around;
		flex-direction: column;
	}
	.line{
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.line text{
		font-size: 20px;
		font-weight: bold;
	}
	.active{
		margin-top: 10px;
		margin-bottom: 10px;
		border-right: solid 5px #aa0000;
	}
	.active text{
		color: #ffff00;
		font-size: 20px;
		font-weight: bold;
	}
	.pic{
		background-color: #cff1c9;
	}
	.pic_main{
		display: flex;
		flex-direction: column;
	}
	.pic_main title{
		margin-left: 10px;
		border-left: #649C7C 5px solid;
	}
	.t-icon-jinru-{
		font-size: 30px;
		font-weight: bold;
		margin-left: 10px;
	}
	.title{
		display: flex;
	}
	.title_main{
		border-bottom: #649C7C 2px solid;
	}
	
</style>
